<template>
  <div>
    <!-- 返回按钮 -->
    <button 
      @click="$router.push('/')" 
      class="absolute top-4 left-4 px-6 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg text-white transition-all duration-300 flex items-center gap-2 z-50"
    >
      <span class="text-xl">←</span>
      <span>返回主菜单</span>
    </button>

    <!-- 游戏状态栏 -->
    <div class="absolute top-4 right-4 flex space-x-4 z-50">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
// 可以添加任何需要的逻辑
</script>

<style scoped>
/* 通用样式 */
.stats-card {
  @apply flex flex-col items-center p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-md;
}

.stats-card span:first-child {
  @apply text-lg text-gray-600;
}

.stats-card span:last-child {
  @apply text-3xl font-bold text-purple-600;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
</style> 